<template>
    <div class="info">
      <div>
        <h1>平台热门游戏</h1>
      </div>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="8" v-for="(item, index) in game" :key="item.id">
          <el-card
                  :body-style="{ padding: '0px' }"
                   shadow="hover">
            <img :src="getUrl(item.pic)" class="image" alt="照片不存在" @click="gocommon(item.id)">
            <div style="padding: 14px;">
              <span>{{item.name}}</span>
              <div class="bottom clearfix">
                <el-tag effect="dark" >
              -{{cheap(item.price,item.lastprice)}}%
                </el-tag>
                <span class="price1">￥{{item.price}}</span>
                <span class="price2">￥{{item.lastprice}}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div style="margin-top: 60px">
        <h1>关于平台</h1>
      </div>
      <el-divider></el-divider>
      <p>本平台致力于给每位玩家提供一个安全快速便捷的交易平台，来共享出自己账号中的额度</p>
      <p>在平台上，你可以轻松查询自己的代购额度，并且挂出自己的账号余额，提供给有需要的玩家购买</p>
      <p>也可在平台市场中挑选自己心仪的卖家和折扣，支付金额、确认好友请求后手动收取礼物</p>
      <p>平台使用的账户信息直接对接steam接口，安全可靠。交易使用全自动流程，方便快捷，避免普通玩家之间交易产生的欺骗纠纷</p>
    </div>
</template>

<script>
import {getGame} from "../api";
import {mixin} from "../mixins/index";

export default {
  mixins: [mixin],
        name: "Info",
        data(){
           return{
              game:[],
             }
          },
        methods:{
          gocommon(id){
            this.$router.push({path:"/common",query:{id:id}});
          }
        },
        created() {
          getGame().then((res)=>{
            this.game = res.data.Game;
          })
        },

}
</script>

<style scoped>
.info{
  padding-left: 50px;
  height: 1020px;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.button {
  padding: 0;
  float: right;
}
.image {
  width: 368px;
  display: block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.el-card{
  width: 360px;
  background-color: #30353D;
}
.el-col-8{
  width: 300px;
  margin: 10px 50px;
  border-radius: 70px;
}
.el-col-8:hover{
  transform: scale(1.1);
  transition: all .3s;
  cursor: pointer;
}
span{
  font-size: 13px;
  color: #fff;
  line-height: .27rem;
}
.price1{
  margin-left: 30px;
  margin-right: 10px;
  text-decoration: line-through;
}
.price2{
  font-size: 30px;
}
.el-tag{
  padding: 2px 10px;
  height: 18px;
  float: bottom;
  background-color: #22AC38;
  margin-left: 60px;
  display: inline;

}
p{
  font-size: 17px
}
</style>
